import React, { Component } from 'react';
import { connect, } from 'react-redux';
import moment from 'moment';
import request from '../api/request'
import { SET_EXCHANGE } from '../actions/actions'
import { getImgUrl, openSherd } from '../utils/utils'

class Exchange extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
        }
    }

    componentDidMount() {
        const { dispatch } = this.props;
        this.getGoodsInfo()
        request.projectInfo({ id: 3 }).then(res => {
            dispatch({
                type: SET_EXCHANGE,
                data: res.data
            })
        })
    }

    getGoodsInfo() {
        const { match: { params } } = this.props
        request.getGoodsInfo({
            id: params.id
        }).then(res => {
            console.log(res)
            this.setState({
                list: [res.data]
            })
        })
    }

    renderCard() {
        const { list } = this.state;
        return list.map((item, index) => {
            return (
                <div className="goods goods-cell" key={index}>
                    <img className="goods-pic" src={getImgUrl(item.describePic)} alt="" />
                    <div className="goods-content">
                        <p className="goods-title">{item.title}</p>
                        <p className="goods-describe">{item.describe}</p>
                        <p className="goods-price">所需积分：{item.price}</p>
                    </div>
                </div>
            )
        })
    }

    submit = () => {
        const { refs: { name, address, phone } } = this
        const { user, history } = this.props
        const { list } = this.state
        console.log(name.value)
        if (!name.value) {
            alert(name.placeholder)
        }
        if (!address.value) {
            alert(address.placeholder)
        }
        if (!phone.value) {
            alert(phone.placeholder)
        }
        console.log(user)

        request.exchangeGoods({
            goodsId: list[0].id,
            openid: user.openid,
            name: name.value,
            address: address.value,
            phone: phone.value,
        }).then(res => {
            alert(res.message)
            history.goBack()
            console.log(res)
        })

    }

    render() {
        const { exchange, dispatch } = this.props;
        const { list } = this.state;
        let isBetween = moment().isBetween(exchange.timeStart, exchange.timeEnd) || moment().isSame(exchange.timeStart, 'days') || moment().isSame(exchange.timeEnd, 'days')
        if (isBetween) {
            return (
                <div className="list">
                    <img className="goodsList-title" src={require('../static/image/questions-bg.png')} alt="" />
                    <div className="goodsList">
                        {this.renderCard()}
                    </div>
                    <div className="goodsList">
                        <div className="goods goods-cell">
                            <div className="form">
                                <input type="text" ref="name" placeholder="请输入收货人姓名" />
                                <input type="text" ref="address" placeholder="请输入收货人地址" />
                                <input type="text" ref="phone" placeholder="请输入收货人手机号" />
                            </div>
                        </div>

                    </div>

                    <div className="sh-btn dh-btn">
                        <button onClick={this.submit}>提交</button>
                    </div>
                </div>
            )
        } else {
            return (
                <div className="questions-cotnent" >
                    <div className="questions-tol-title">
                        <img src={require('../static/image/text-duihuan.png')} alt="" />
                        {/* <p className="subtitle">请{gameInfo.timeStart}至{gameInfo.timeEnd}参加活动</p> */}
                    </div>
                    <div className="render-home-btns">
                        <div className="home-btns">
                            <div className="go" onClick={() => this.props.history.push('/questions/')}><img src={require('../static/image/btn-goHome.png')} alt="" /></div>
                        </div>
                        <div className="home-cell">
                            <div className="icon" onClick={() => this.props.history.push('/questions/list')}><img src={require('../static/image/icon-paihangbang.png')} alt="" /></div>
                            <div className="icon" onClick={() => openSherd(dispatch)}><img src={require('../static/image/icon-fxhaoyou.png')} alt="" /></div>
                        </div>
                    </div>
                </div>
            )
        }
    }
}

export default connect(({ user, code, exchange }) => ({ user, code, exchange }))(Exchange);
